<template>
  <div class="hawkChart">
    <h3>{{chartTitle}}</h3>
    <div ref="lineChart" style="width:90%;height:400px;"></div>
  </div>
</template>

<script>
/**
* @author 罗冲
* @description 折线图组件
* @api 后台接口地址
* @since 2021-11-09
* @update 代码更新时间
* @modifier 修改人
* @bug 无
* @version 版本号 例:v1.0.0
*/
import * as echarts from "echarts";
export default {
  data () {
    return {
    };
  },
  props:{
    chartTitle:{
      type:String,
      default:''
    },
    chartData:{
      type:Object,
      default:()=>{
        return {
          x:[],
          y:[]
        }
      }
    },
    unit:{
      type:String,
      default:''
    }
  },
  watch:{
    chartData:function(val){
      console.log(val);
      this.chart();
    }
  },
  methods: {
    chart(){
      let this_ = this;
      var lineChart = this.$refs.lineChart;
      var myChart = echarts.init(lineChart);
      myChart.setOption({
        tooltip: {
          formatter: function(params) {
            return params.seriesName + "：" + params.value + this_.unit;
          }
        },
        xAxis: {
          type: "category",
          data: this.chartData.x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: '{value}'+this.unit
          }
        },
        series: [
          {
            name: this.chartTitle,
            data: this.chartData.y,
            type: "line",
            itemStyle : {  
              normal : {  
                lineStyle:{  
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,   // 前两位代表上下，后两位代表左右
                    [
                        {offset: 1, color: 'red'},  
                        {offset: 0, color: 'blue'}
                    ]
                  )
                }  
              }  
            }
          },
        ],
      });
    }
  },
  mounted(){
    this.chart();
  }
}
</script>

<style lang='scss' scoped>
.hawkChart{
  padding-top:20px;
  h3{
    width: 90%;
    margin:0 auto;
  }
}
</style>